<!-- eslint-disable no-redeclare -->
<!-- eslint-disable no-import-assign -->
<script setup lang="ts">
import { ref, withDefaults } from 'vue'
// #ifndef H5
// @ts-ignore
import ShopGoodsO2o from './shop-goods-o2o/shop-goods-o2o.vue'
// @ts-ignore
import Shop from './components/shop.vue'
// #endif
// #ifdef H5
const ShopGoodsO2o = defineAsyncComponent(() => import('./shop-goods-o2o/shop-goods-o2o.vue'))
const Shop = defineAsyncComponent(() => import('./components/shop.vue'))
// #endif
import ShopSwiper from './components/shop-swiper.vue'
import { formData } from './shop-goods-default.vue'
import { defineAsyncComponent } from 'vue'
interface IProps {
  decorationProperties: typeof formData
}
withDefaults(defineProps<IProps>(), {
  decorationProperties: () => formData,
})

const current = ref(0)
// 切换current
const handleChange = (e: any) => {
  current.value = e.detail.current
}
</script>
<template>
  <view v-if="!['is-style-one', 'is-style-two'].includes(decorationProperties.showStyle) || decorationProperties.shopInfo?.[0]?.shop?.id">
    <view v-if="decorationProperties.showStyle === 'is-style-one'" class="shop-goods">
      <view class="shop-title">{{ decorationProperties.title }}</view>
      <ShopSwiper :shopAbstract="decorationProperties.shopInfo" />
    </view>

    <view v-else-if="decorationProperties.showStyle === 'is-style-two'" class="shop-goods">
      <!-- #ifndef H5 -->
      <image :src="decorationProperties.shopBigImg" class="goodsBigImg" />
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <img :src="decorationProperties.shopBigImg" class="goodsBigImg" />
      <!-- #endif -->
      <view>
        <Shop v-for="item in decorationProperties.shopInfo" :key="item.shop.id" :shop-item="item" />
      </view>
    </view>
    <view v-else>
      <ShopGoodsO2o :decoration-properties="decorationProperties" />
    </view>
  </view>
</template>

<style scoped lang="scss">
@include b(shop-goods) {
  padding: 20rpx;
  background-color: #f2f2f2;
  @include e(active) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 52rpx;
    width: 725rpx;
    border: 1px solid #fcfcfc;
    border-radius: 0 0 16rpx 16rpx;
    background-color: #fff;
    border-top: 1px dotted #eee;
  }
}
.goodsBigImg {
  width: calc(100% - 2px);
  height: 700rpx;
  border: 1px solid #eee;
  margin-bottom: -10rpx;
  // #ifdef H5
  object-fit: fill;
  // #endif
}
.point {
  width: 14rpx;
  height: 14rpx;
  background: #ff3a3a;
  border-radius: 7rpx;
  opacity: 0.4;
  margin-left: 20rpx;
}
.current {
  opacity: 1;
}
.swiper {
  height: 480rpx;
}
.shop-title {
  margin: 10px 0;
  color: rgb(51, 51, 51);
  font-size: 32rpx;
  font-weight: 500;
}
</style>
